<template>
    <div class="formula">
        <div class="formula-empty" v-if="dataSource.length === 0 && !currentView ">
            <div class="empty-center">
                <a-button type="primary"  @click="addFormula()"><a-icon type="plus"/>{{i18n('formula.addFormula', '添加公式')}}</a-button>
            </div>
        </div>
        <div class="formula-content" v-else>
            <FormTableFormula
                v-if="currentView==='edit'"
                :config="config"
                @confirm="onConfirm"
                @cancel="onCancel"
            >
            </FormTableFormula>

            <template v-if="currentView=='list'">
                <div class="formula-title">
                    <span>{{i18n('formula.formulaManage', '公式配置管理')}}</span>
                    <a-button-group>
                        <a-button type="primary" @click="addFormula()">{{i18n('formula.add', '新增')}}</a-button>
                    </a-button-group>
                </div>
                <div class="formula-grid-box">
                    <RxGrid
                        :dataSource="dataSource"
                        :columns="columns"
                        :showPage="false"
                        :allowRowSelect="true"
                        :multiSelect="true"
                        row-key="key"
                    >
                        <span slot="operator" slot-scope="{text,record,index,blur}">
                            <a-tag :color="operators[text].color">
                              <span>{{ operators[text].text }}</span>
                            </a-tag>
                        </span>
                        <span slot="notes" slot-scope="{text,record,index,blur}">
                            <span :class="{'row-notes-no':!text}">{{text?text : i18n('formula.noNotes', '暂无备注')}}</span>
                        </span>
                        <span slot="dataSource" slot-scope="{text,record,index,blur}">
                            <span :class="{'row-data-source-no':!text}">{{text?text : i18n('formula.def', '默认')}}</span>
                        </span>
                        <span slot="acton" slot-scope="{text,record,index,blur}">
                            <span class="row-btn" @click.stop="addFormula(record)">{{i18n('formula.edit', '编辑')}}</span>
                            <span class="row-btn row-btn-del" @click.stop="delFormula(record)">{{i18n('formula.del', '删除')}}</span>
                        </span>
                    </RxGrid>
                </div>
            </template>

        </div>
    </div>

</template>

<script>
/**
 * @Author : yangsanjin
 * @Date: 2024-09-13 11:45
 */
import { RxGrid ,Util} from "@lowcode/jpaas-common-lib"
import FormTableFormula from "./FormTableFormula.vue";
import {cloneDeep} from 'lodash-es'
export default {
    name: "FormTableFormulaDataAdd",
    components:{
        RxGrid,
        FormTableFormula
    },
    props:{
        //公式配置
        dataConf:{},
        //业务模型ID
        boDefId:{},
        //实体名
        boName:{},
        //是否主表
        isMain:{},
        //类型 main,onetoone,onetomany
        type:{},
        //来源表备注
        comment:{},
        layerid:{},
        destroy:{}
    },
    data(){
        return {
            operators:{
                new:{ color:'green', text:this.$ti18('rxList.newBtn', '新建')},
                upd:{ color:'orange', text:this.$ti18('rxList.update', '更新')},
                del:{ color:'purple', text:this.$ti18('rxList.delBtn', '删除')},
            },
            dataSource:[],
            columns:[
                {
                    title: this.$ti18('rxList.index', '序号'),
                    type: 'indexColumn',
                    width: 80,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'}
                },
                {
                    title: '备注',
                    dataIndex: 'notes',
                    width: 120,
                    scopedSlots: {customRender: 'notes'}
                },
                {
                    title: '数据源',
                    dataIndex: 'dataSource',
                    width: 120,
                    scopedSlots: {customRender: 'dataSource'}
                },
                {
                    title: '触发时机',
                    dataIndex: 'operator',
                    width: 120,
                    scopedSlots: {customRender: 'operator'}
                },
                {
                    title: '目标表',
                    dataIndex: 'tableName',
                    width: 120,
                },
                {
                    title: '操作',
                    dataIndex: 'acton',
                    width: 120,
                    scopedSlots: {customRender: 'acton'}
                },
            ],
            currentView:"",
            config:'',
            //编辑时使用
            curRecord:{}
        }
    },
    created(){
        if(this.dataConf && this.dataConf.setting && Array.isArray(this.dataConf.setting)){
            this.dataSource = this.dataConf.setting.map(item=>{
                return {
                    notes:item.notes??'',//备注
                    dataSource:item.dsLabel,//数据源
                    operator:item.operator ?? '',
                    tableName:item.tableName ?? '',
                    config:{...item}
                }
            })
            //有配置数据源.
            if(this.dataSource.length>0){
                this.currentView = 'list';
            }
        }

    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "formTableFormula", key);
        },
        delFormula(record){
            let idx = this.dataSource.findIndex(item=>item.idx_ === record.idx_)
            this.dataSource.splice(idx,1)
            if(this.destroy){
                this.destroy('ok',cloneDeep({setting:this.dataSource.map(item=>item.config)}))
            }
        },
        onCancel(){
            this.currentView = this.dataSource.length===0 ? '' : 'list';
        },
        onConfirm(data){
            if(this.curRecord){
                this.curRecord.notes = data.notes ;
                this.curRecord.dataSource = data.dsLabel;
                this.curRecord.tableName = data.tableName;
                this.curRecord.operator = data.operator;
                this.curRecord.config = data;
            }else {
                let row= {
                    notes:data.notes,
                    dataSource:data.dsLabel,
                    tableName:data.tableName,
                    operator:data.operator,
                    config:data,
                    key:Util.randomId()
                }
                this.dataSource.push(row)
            }
            this.currentView = 'list';
            if(this.destroy){
                this.destroy('ok',cloneDeep({setting:this.dataSource.map(item=>item.config)}))
            }
        },
        addFormula(record){
            this.currentView = 'edit';
            let obj={};
            if(!record){
                obj = {
                    //业务模型ID
                    boDefId:this.boDefId,
                    //实体名
                    boName:this.boName,
                    //是否主表
                    isMain:this.isMain,
                    //类型 main,onetoone,onetomany
                    type:this.type,
                    //comment
                    comment:this.comment

                };
                this.config=obj;
                this.curRecord = null;
            }
            else{
                this.config=record.config;
                this.config.comment = this.comment;
                this.curRecord = record;
            }
        }
    }
}
</script>

<style scoped>
.formula-btn-toolbar{
    border-top: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}
.formula{
    height: 100%;
    width: 100%;
}
.formula-empty{
    width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.empty-center{
    margin-top: -10%;
}
.formula-content{
    width: inherit;
    height: inherit;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.formula-title{
    padding: 10px ;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.row-data-source-no,
.row-notes-no{
    color: rgba(139,139,139,0.6);
}
.row-btn{
    cursor: pointer;
    display: inline-flex;
    padding: 2px 6px;
    color: #4d9eff;
}
.row-btn:first-child{
    padding-left: 0;
}
.row-btn:hover{
    color: #1890ff;
}
.row-btn.row-btn-del:hover{
    color: red;
}
</style>